<template>
    <!-- 主内容区域 -->
      <div class="content-area">
        <!-- 搜索和筛选区域 -->
        <div class="filter-section">
          <el-input
            v-model="searchQuery"
            placeholder="搜索患者姓名、床号或诊断"
            class="search-input"
            :prefix-icon="Search"
            clearable
          />
          <el-select v-model="filterDepartment" placeholder="全部科室" clearable>
            <el-option
              v-for="dept in departments"
              :key="dept.value"
              :label="dept.label"
              :value="dept.value"
            />
          </el-select>
          <el-select v-model="filterStatus" placeholder="全部状态" clearable>
            <el-option
              v-for="status in statusOptions"
              :key="status.value"
              :label="status.label"
              :value="status.value"
            />
          </el-select>
          <el-button type="primary" :icon="Search">搜索</el-button>
          <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-cards">
          <div class="stat-card">
            <div class="stat-header">
              <div class="stat-title">负责患者</div>
              <div class="stat-icon nursing-icon">
                <el-icon><User /></el-icon>
              </div>
            </div>
            <div class="stat-value">24</div>
            <div class="stat-desc">较昨日增加2人</div>
          </div>

          <div class="stat-card">
            <div class="stat-header">
              <div class="stat-title">新入院</div>
              <div class="stat-icon">
                <el-icon><CirclePlus /></el-icon>
              </div>
            </div>
            <div class="stat-value">3</div>
            <div class="stat-desc">今日新入院患者</div>
          </div>

          <div class="stat-card">
            <div class="stat-header">
              <div class="stat-title">危重患者</div>
              <div class="stat-icon">
                <el-icon><Warning /></el-icon>
              </div>
            </div>
            <div class="stat-value">2</div>
            <div class="stat-desc">需要特别关注</div>
          </div>

          <div class="stat-card">
            <div class="stat-header">
              <div class="stat-title">待出院</div>
              <div class="stat-icon">
                <el-icon><CircleCheck /></el-icon>
              </div>
            </div>
            <div class="stat-value">1</div>
            <div class="stat-desc">计划明日出院</div>
          </div>
        </div>

        <!-- 患者列表 -->
        <div class="patient-list-card">
          <div class="section-title">
            <span>患者列表</span>
            <div class="header-actions">
              <el-button type="primary" :icon="Plus">新增患者</el-button>
              <el-button :icon="Download">导出</el-button>
            </div>
          </div>

          <el-table :data="filteredPatients" style="width: 100%" stripe>
            <el-table-column prop="name" label="患者姓名" min-width="100" />
            <el-table-column prop="gender" label="性别" width="80" />
            <el-table-column prop="age" label="年龄" width="80" />
            <el-table-column prop="bedNumber" label="床号" width="100" />
            <el-table-column prop="department" label="科室" min-width="120" />
            <el-table-column prop="diagnosis" label="诊断" min-width="150" />
            <el-table-column prop="doctor" label="主治医生" min-width="120" />
            <el-table-column prop="admissionDate" label="入院日期" width="120" />
            <el-table-column label="护理级别" width="100">
              <template #default="{ row }">
                <el-tag :type="getCareLevelType(row.careLevel)" size="small">
                  {{ row.careLevel }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)" size="small">
                  {{ row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="{ row }">
                <el-button size="small" @click="viewPatientDetails(row)">详情</el-button>
                <el-button size="small" type="primary" @click="editPatient(row)">编辑</el-button>
                <el-dropdown>
                  <el-button size="small">
                    更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="viewNursingRecords(row)">护理记录</el-dropdown-item>
                      <el-dropdown-item @click="viewVitalSigns(row)">生命体征</el-dropdown-item>
                      <el-dropdown-item @click="transferPatient(row)">转科</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :small="true"
              :background="true"
              layout="total, sizes, prev, pager, next, jumper"
              :total="patients.length"
            />
          </div>
        </div>
      </div>
    

    <!-- 患者详情对话框 -->
    <el-dialog v-model="detailDialogVisible" :title="`患者详情 - ${selectedPatient?.name}`" width="800px">
      <PatientDetail :patient="selectedPatient" v-if="detailDialogVisible" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="editPatient(selectedPatient)">编辑信息</el-button>
        </span>
      </template>
    </el-dialog>
  
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import PatientDetail from '@/components/nurse/PatientDetail.vue'


// 搜索和筛选相关
const searchQuery = ref('')
const filterDepartment = ref('')
const filterStatus = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 对话框控制
const detailDialogVisible = ref(false)
const selectedPatient = ref(null)

// 模拟科室数据
const departments = ref([
  { value: 'internal', label: '内科' },
  { value: 'surgery', label: '外科' },
  { value: 'pediatrics', label: '儿科' },
  { value: 'obstetrics', label: '妇产科' },
  { value: 'orthopedics', label: '骨科' }
])

// 状态选项
const statusOptions = ref([
  { value: 'hospitalized', label: '在院' },
  { value: 'critical', label: '危重' },
  { value: 'recovering', label: '康复中' },
  { value: 'discharging', label: '待出院' }
])

// 模拟患者数据
const patients = ref([
  {
    id: 1,
    name: '张三',
    gender: '男',
    age: 65,
    bedNumber: '302-1',
    department: '内科',
    diagnosis: '高血压、冠心病',
    doctor: '王医生',
    admissionDate: '2023-10-15',
    careLevel: '一级护理',
    status: '在院',
    phone: '13800138000',
    emergencyContact: '李四（儿子）',
    emergencyPhone: '13900139000'
  },
  {
    id: 2,
    name: '李四',
    gender: '女',
    age: 48,
    bedNumber: '405-2',
    department: '外科',
    diagnosis: '急性阑尾炎术后',
    doctor: '刘医生',
    admissionDate: '2023-10-20',
    careLevel: '二级护理',
    status: '康复中',
    phone: '13800138001',
    emergencyContact: '王五（丈夫）',
    emergencyPhone: '13900139001'
  },
  {
    id: 3,
    name: '王五',
    gender: '男',
    age: 72,
    bedNumber: '208-3',
    department: '内科',
    diagnosis: '肺炎、呼吸衰竭',
    doctor: '张医生',
    admissionDate: '2023-10-18',
    careLevel: '特级护理',
    status: '危重',
    phone: '13800138002',
    emergencyContact: '赵六（女儿）',
    emergencyPhone: '13900139002'
  },
  {
    id: 4,
    name: '赵六',
    gender: '女',
    age: 35,
    bedNumber: '106-1',
    department: '妇产科',
    diagnosis: '顺产术后',
    doctor: '陈医生',
    admissionDate: '2023-10-22',
    careLevel: '一级护理',
    status: '在院',
    phone: '13800138003',
    emergencyContact: '钱七（丈夫）',
    emergencyPhone: '13900139003'
  },
  {
    id: 5,
    name: '钱七',
    gender: '男',
    age: 56,
    bedNumber: '512-2',
    department: '骨科',
    diagnosis: '股骨骨折术后',
    doctor: '杨医生',
    admissionDate: '2023-10-12',
    careLevel: '二级护理',
    status: '待出院',
    phone: '13800138004',
    emergencyContact: '孙八（妻子）',
    emergencyPhone: '13900139004'
  }
])

// 过滤后的患者列表
const filteredPatients = computed(() => {
  let result = patients.value
  
  // 根据搜索词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(patient => 
      patient.name.toLowerCase().includes(query) ||
      patient.bedNumber.toLowerCase().includes(query) ||
      patient.diagnosis.toLowerCase().includes(query)
    )
  }
  
  // 根据科室过滤
  if (filterDepartment.value) {
    result = result.filter(patient => patient.department === filterDepartment.value)
  }
  
  // 根据状态过滤
  if (filterStatus.value) {
    const statusMap = {
      'hospitalized': '在院',
      'critical': '危重',
      'recovering': '康复中',
      'discharging': '待出院'
    }
    result = result.filter(patient => patient.status === statusMap[filterStatus.value])
  }
  
  return result
})

// 获取护理级别标签类型
const getCareLevelType = (level) => {
  const map = {
    '特级护理': 'danger',
    '一级护理': 'warning',
    '二级护理': 'primary',
    '三级护理': 'success'
  }
  return map[level] || 'info'
}

// 获取状态标签类型
const getStatusType = (status) => {
  const map = {
    '危重': 'danger',
    '在院': 'warning',
    '康复中': 'primary',
    '待出院': 'success'
  }
  return map[status] || 'info'
}

// 查看患者详情
const viewPatientDetails = (patient) => {
  selectedPatient.value = patient
  detailDialogVisible.value = true
}

// 编辑患者信息
const editPatient = (patient) => {
  selectedPatient.value = patient
  // 这里可以打开编辑对话框
  console.log('编辑患者:', patient)
}

// 查看护理记录
const viewNursingRecords = (patient) => {
  console.log('查看护理记录:', patient)
}

// 查看生命体征
const viewVitalSigns = (patient) => {
  console.log('查看生命体征:', patient)
}

// 转科操作
const transferPatient = (patient) => {
  console.log('转科:', patient)
}

// 重置筛选条件
const resetFilters = () => {
  searchQuery.value = ''
  filterDepartment.value = ''
  filterStatus.value = ''
}

onMounted(() => {
  // 可以在这里添加数据加载逻辑
})
</script>

<style lang="scss" scoped>
.content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

.filter-section {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: center;
  
  .search-input {
    width: 300px;
  }
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stat-title {
  font-size: 16px;
  color: #606266;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 117, 188, 0.1);
  color: #1a75bc;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}

.stat-desc {
  color: #909399;
  font-size: 14px;
}

.patient-list-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .filter-section {
    .search-input {
      width: 100%;
    }
    
    .el-select {
      flex: 1;
      min-width: 120px;
    }
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .section-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    
    .header-actions {
      width: 100%;
      justify-content: flex-end;
    }
  }
}
</style>